<template>
  <div class="managerMana-container common-container">
    <div class="common-top">
      <span class="left title">算力租赁</span>
      <b>
        到期时间：
        <span v-if="my.expired" style="color: red">(已过期)</span>
        <span>&nbsp;{{ my.expiredTime | parseTime }}</span>
      </b>
    </div>
    <div class="common-bot">
      <div
        style="
          padding: 10px;
          font-size: 14px;
          line-height: 150%;
          color: lightslategray;
        "
      >
        <i class="el-icon-info"></i>
        AI悟道服务的初衷是为了拯救像作者一样的小散户，避免大家在熊市中亏钱，在牛市中还继续亏钱，力争实现熊市小赢，牛市大赢的追求。<br />
        <i class="el-icon-info"></i>
        作为AI悟道的新用户，系统会自动给予
        {{ setting.newUserTryDays }}
        天免费体验期，仅对有需求的朋友收取一些费用，收费不是目的，但是呢？咱们的服务器、带宽、算力等成本费用存在，希望大家在享受方便的同时，能给予AI悟道更多支持。<br />
        <span style="color: red; font-weight: bold">
          <i class="el-icon-warning"></i>
          股市有风险，投资需谨慎，每个小散户都有一个赤诚之心，坚持做难而正确的事，才能走得更远。<br />
          <i class="el-icon-warning"></i>
          特别提醒！！！AI悟道不提供任何形式的服务保证，算力中心会在不断的交易中优化算法，以确保越来越好的成功概率。<br />
          <i class="el-icon-warning"></i>
          用户使用AI悟道服务需自行承担投资风险，您的支持也将是AI悟道的未来算法优化发展的基本动力，造福广大的散户投资者。<br /> </span
        ><br />
      </div>
      <div class="vip-items">
        <el-steps
          :active="activeName"
          finish-status="success"
          style="width: 100%"
          align-center
        >
          <el-step title="" icon="" v-for="(item, idx) in prices">
            <template slot="description">
              <el-card class="item-card" :class="{ minTop: item.detail.length > 32 }" shadow="hover">
                <div class="tit">{{ item.name }}</div>
                <div class="service-info">
                  <div class="info-item">
                    <div class="item-detail">
                      {{ item.detail }}
                    </div>
                  </div>
                  <div class="info-item">
                    <div class="name-info">
                      <i class="icon el-icon-success"></i>
                      <div class="item-name">时长</div>
                    </div>
                    <div class="item-val">{{ item.day }}天</div>
                  </div>
                  <div class="info-item">
                    <div class="name-info">
                      <i class="icon el-icon-success"></i>
                      <div class="item-name">价格</div>
                    </div>
                    <div class="item-val">
                      <span class="weight-val"
                        >¥{{ item.price | fen2yuan }}</span
                      >
                    </div>
                  </div>
                  <div
                    class="btn"
                    @click.stop="upgradeDialogVisible = true"
                  >
                    {{ item.price === 0 ? "立即咨询" : "立即购买" }}
                  </div>
                </div>
              </el-card>
            </template>
          </el-step>
        </el-steps>
      </div>

      <div
        style="
          padding: 10px;
          font-size: 14px;
          line-height: 150%;
          color: lightslategray;
          font-weight: bold;
          margin-top: 10px;
        "
      >
        通过邀请码获取免费时长：{{ my.clientKey }}<br />
        <span
          >每成功邀请一个（使用三天以上才有效的）新用户可免费获得当前账号类型<b>
            {{ setting.newUserInviteTryDays }} </b
          >天的体验时长。</span
        >
      </div>
    </div>
    <el-dialog
      title="算力租赁"
      :visible.sync="upgradeDialogVisible"
      width="440px"
    >
      <img src="@/assets/image/weixin.jpg" style="width: 400px" alt="" /><br />
      <span class="line"
        >AI悟道暂未开通线上支付。<br />若您有需要，请添加微信客服咨询算力租赁。</span
      >
    </el-dialog>
  </div>
</template>

<script>
import Api from "@/api";
import { fen2yuan } from "@/utils";

export default {
  name: "renewal",
  data() {
    return {
      activeName: 0,
      upgradeDialogVisible: false,
      prices: [],
      my: {},
      setting: {},
    };
  },
  methods: {
    getInfo() {
      Api.manager.my().then((res) => {
        this.my = res.data;
        this.setting = res.extra.setting;
      });
    },
    getPrices() {
      return new Promise((resolve, reject) => {
        Api.vipPrice
          .all()
          .then((res) => {
            this.prices = res.data;
            resolve(res);
          })
          .catch((err) => {
            reject(err);
          });
      });
    },
  },
  async mounted() {
    await this.getPrices();
    this.getInfo();
  },
};
</script>
<style scoped lang="scss">
.common-top{
  min-height: 40px;
}
::v-deep .common-bot {
  .el-step__description {
    padding: 0 5% !important;

    .el-icon-success {
      display: none;
    }

    .btn {
      &.ed {
        display: none;
      }
    }

    &.is-success {
      .price {
        filter: grayscale(0.9);
      }

      .btn {
        display: none;

        &.ed {
          filter: grayscale(0.9);
          display: flex;
        }
      }

      .el-icon-success {
        filter: grayscale(0.9);
        display: inline-block;
      }
    }
  }

  .nowService {
    .el-icon-success {
      display: inline-block;
      filter: initial !important;
    }
  }
}

.vip-items {
  width: 100%;
  margin-top: 10px;

  .item-card {
    margin-top: 20px;
    padding: 20px 5px;
    height: 380px;
    position: relative;
  }
  .minTop {
    .info-item{
      padding: 14px 0;
    }
  }
}

.tit {
  font-size: 20px;
  font-weight: bold;
}

.service-info {
  display: flex;
  flex-wrap: wrap;
  margin-top: 20px;

  .info-item {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    padding: 20px 0;

    .name-info {
      display: flex;
      align-items: center;
    }

    .item-name {
      font-size: 14px;
      color: #555;
    }

    .item-detail {
      font-size: 14px;
      color: #555;
      text-align: left;
    }

    .icon {
      font-size: 16px;
      color: #67c23a;
      margin-right: 5px;
    }

    .item-val {
      font-size: 14px;
    }

    .weight-val {
      font-size: 20px;
      padding: 0 5px;
      font-weight: bold;
    }

    &.price {
      .weight-val {
        color: #ff4800;
      }
    }
  }

  .btn {
    position: absolute;
    left:0;
    right: 0;
    bottom: 10px;
    width: 70%;
    height: 40px;
    border-radius: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid #2d61fc;
    margin: 0 auto;
    cursor: pointer;
    color: #2d61fc;
    transition: all 0.3s;
    font-size: 14px;
    margin-top: 20px;

    &:hover {
      background-color: #2d61fc;
      color: #fff;
    }
  }
}
</style>
